<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .redd {
            color: red;
        }

        .gree {
            color: green;
        }
    </style>
</head>

<body>
    <p class="shouji"><input type="text"><span>请输入手机号</span> </p>
    <p class="qq"><input type="text"><span>请输入QQ号</span></p>
    <p class="nicheng"><input type="text"><span>请输入昵称</span></p>
    <p class="pwd"><input type="text"><span>请输入密码</span></p>
    <p class="qrpwd"><input type="text"><span>请确认密码</span></p>
    <script>
        // 将课堂中讲解的最后的表单验证案例完成一遍
        // 正则表达式
        var sj = /^1[3|4|5|7|8][0-9]{9}$/;//手机号验证
        var q = /^[1-9]\d{4,}$/;//手机号验证
        var nc = /^[\u4e00-\u9fa5]{2,8}$/;//昵称验证
        var pw = /^[a-zA-Z0-9_-]{6,16}$/;//密码验证
        // 获取事件
        var shouji = document.querySelector('.shouji input');
        var qq = document.querySelector('.qq input');
        var nicheng = document.querySelector('.nicheng input');
        var pwd = document.querySelector('.pwd input');
        var qrpwd = document.querySelector('.qrpwd input');

        // var span1 = document.querySelector('.shouji span');
        // var span2 = document.querySelector('.qq span');
        // var span3 = document.querySelector('.nicheng span');
        // var span4 = document.querySelector('.pwd span');


        fun(shouji, sj);
        fun(qq, q);
        fun(nicheng, nc);
        fun(pwd, pw);
        function fun(ele, e) {
            ele.onblur = function () {
                if (e.test(this.value)) {
                    // alert('手机格式正确');
                    this.nextElementSibling.className = 'gree';
                    this.nextElementSibling.innerHTML = '格式正确';
                } else {
                    // alert('手机格式错误');
                    this.nextElementSibling.className = 'redd';
                    this.nextElementSibling.innerHTML = '格式错误';
                }
            }
        };
        qrpwd.onblur = function () {
            if (this.value == pwd.value) {
                // console.log(11);
                this.nextElementSibling.className = 'gree';
                this.nextElementSibling.innerHTML = '二次密码正确';
            } else {
                this.nextElementSibling.className = 'redd';
                this.nextElementSibling.innerHTML = '二次密码错误';
            }
        }




        /*
                shouji.onblur = function () {
                    if (sj.test(this.value)) {
                        // alert('手机格式正确');
                        span1.className = 'gree';
                        span1.innerHTML = '手机号格式正确';
                    } else {
                        // alert('手机格式错误');
                        span1.className = 'redd';
                        span1.innerHTML = '手机号格式错误';
                    }
                }
                qq.onblur = function () {
                    if (q.test(this.value)) {
                        span2.className = 'gree';
                        span2.innerHTML = 'QQ号格式正确';
                    } else {
                        span2.className = 'redd';
                        span2.innerHTML = 'QQ号格式错误';
                    }
                }
                nicheng.onblur = function () {
                    if (nc.test(this.value)) {
                        span3.className = 'gree';
                        span3.innerHTML = '昵称格式正确';
                    } else {
                        span3.className = 'redd';
                        span3.innerHTML = '昵称格式错误';
                    }
                }
                pwd.onblur = function () {
                    if (pw.test(this.value)) {
                        span4.className = 'gree';
                        span4.innerHTML = '密码格式正确';
                    } else {
                        span4.className = 'redd';
                        span4.innerHTML = '密码格式错误';
                    }
                } */
    </script>
</body>

</html>